<!doctype html>
<html ng-app="myApp">

<head>
  <meta charset="utf-8">
  <title>Server-Sent Events with Quarkus and AngularJS</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>

<body ng-controller="myController">
  <form ng-submit="startEventStream()">
    <label for="countInput">Number of events:</label>
    <input type="number" id="countInput" ng-model="count" min="1" max="10" required>
    <br>
    <label for="nameInput">Name:</label>
    <input type="text" id="nameInput" ng-model="name" required>
    <br><br>
    <button type="submit">Start Event Stream</button>
  </form>

  <div id="eventContainer"></div>

  <script type="text/javascript">
    angular.module('myApp', [])
      .controller('myController', ['$scope', '$http', function($scope, $http) {
        $scope.startEventStream = function() {
          var count = $scope.count;
          var name = $scope.name;
          var eventSource = new EventSource('/stream/' + count + '/' + name);
          var container = document.getElementById('eventContainer');
          var eventCount = 0;

          eventSource.addEventListener('message', function(event) {
            if (eventCount < count) {
              var p = document.createElement('p');
              p.textContent = event.data;
              container.appendChild(p);
              eventCount++;
            } else {
              eventSource.close();
            }
          });
        }
      }]);
  </script>
</body>

</html>
